iT邦幫忙

2024 iThome 鐵人賽

DAY 5
0

陣列是 JavaScript 中用來存儲多個數據的一種數據結構,允許我們在一個變量中存儲一組值,並且提供許多操作方法來處理這些數據。

1. 創建陣列

陣列是一組有序的值,這些值可以是任何數據類型,如字串、數字,甚至是其他陣列。創建陣列的方法很簡單,使用方括號 [] 並將值用逗號分隔。

範例:

let fruits = ["Apple", "Banana", "Cherry"];
console.log(fruits); // ["Apple", "Banana", "Cherry"]

2. 訪問陣列中的元素

陣列中的元素有索引,從 0 開始。可以通過索引訪問陣列中的特定元素。

範例:

let firstFruit = fruits[0]; // "Apple"
let secondFruit = fruits[1]; // "Banana"
console.log(firstFruit);
console.log(secondFruit);

3. 修改陣列

你可以直接修改陣列中的某個元素,或者往陣列中添加和刪除元素。

  • 修改陣列中的元素

    fruits[1] = "Blueberry"; // 將 "Banana" 替換為 "Blueberry"
    console.log(fruits); // ["Apple", "Blueberry", "Cherry"]

  • 往陣列中添加元素
    使用 push() 方法可以在陣列末尾添加元素。

    fruits.push("Orange");
    console.log(fruits); // ["Apple", "Blueberry", "Cherry", "Orange"]

  • 移除陣列中的元素
    使用 pop() 方法可以移除陣列末尾的元素。

    fruits.pop();
    console.log(fruits); // ["Apple", "Blueberry", "Cherry"]

  • 使用 shift()unshift() 方法可以在陣列開頭添加或移除元素。

    fruits.unshift("Mango"); // 在開頭添加 "Mango"
    console.log(fruits); // ["Mango", "Apple", "Blueberry", "Cherry"]

    fruits.shift(); // 移除開頭的 "Mango"
    console.log(fruits); // ["Apple", "Blueberry", "Cherry"]

4. 常見的陣列方法

  • length:可以取得陣列的長度,即陣列中元素的個數。

    console.log(fruits.length); // 3

  • indexOf():查找特定元素的索引。

    let index = fruits.indexOf("Cherry");
    console.log(index); // 2

  • slice():提取陣列的一部分,不會改變原數組。

    let slicedFruits = fruits.slice(1, 3); // 從索引 1 開始到索引 3(不包括 3)
    console.log(slicedFruits); // ["Blueberry", "Cherry"]

  • concat():將兩個或多個陣列合併成一個新陣列。

    let moreFruits = ["Grapes", "Pineapple"];
    let allFruits = fruits.concat(moreFruits);
    console.log(allFruits); // ["Apple", "Blueberry", "Cherry", "Grapes", "Pineapple"]

5. 陣列的遍歷

可以使用 for 循環或 forEach() 方法來遍歷陣列中的每個元素。

  • for 循環

    for (let i = 0; i < fruits.length; i++) {
    console.log(fruits[i]);
    }

  • forEach()方法

    fruits.forEach(function(fruit) {
    console.log(fruit);
    });


上一篇
字串操作
下一篇
迴圈
系列文
JavaScript 基礎:端開發的第一步30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言